<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	<article class="prevnext">
		<a class="" href="01.Sample-Boxed.html">01</a>
		<a class="" href="02.Sample-Fullwidth.html">02</a>
		<a class="" href="03.Sample-FullScreen.html">03</a>
		<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
		<a class="" href="05.Sample-Aligns.html">05</a>
		<a class="" href="06.Sample-AlignForce.html">06</a>
		<a class="active" href="07.Sample-Videos.html">07</a>
		<a class="" href="08.Sample-NavigationStyle.html">08</a>
		<a class="" href="09.Sample-Api.html">09</a>
		<a class="" href="10.Sample-LazyLoading.html">10</a>
		<a class="" href="11.Sample-Shuffle.html">11</a>
		<a class="" href="12.Sample-Backgrounds.html">12</a>
		<a class="" href="13.Sample-HideCaptions.html">13</a>
		<a class="" href="14.Sample-KenBurns.html">14</a>
		<a class="" href="15.Sample-VideoBG.html">15</a>
		<a class="" href="16.Caption-ShowDown.html">16</a>
	</article>


	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<article class="boxedcontainer">

	<!--
	#################################
		- THEMEPUNCH BANNER -
	#################################
	-->
	<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

	<div class="tp-banner-container">
		<div class="tp-banner" >
			<ul>
				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
					<!-- MAIN IMAGE -->
					<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


					<!-- LAYER NR. 1 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="20"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="600"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">VIMEO
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="70"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="900"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTOPLAY - FALSE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO NEXT SLIDE - FALSE
					</div>

					<!-- LAYER NR. 4 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="170"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO PLAY ONLY ONCE - FALSE
					</div>

					<!-- LAYER NR. 5 -->
					<div class="tp-caption sft customout"
						data-x="399"
						data-y="385"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="1000"
						data-start="1500"
						data-easing="Back.easeOut"
						data-endspeed="500"
						data-captionhidden="on"
						style="z-index: 7"><img src="images/videoshadow.png" alt="">
					</div>

					<!-- LAYER NR. 6 -->
					<div class="tp-caption customin customout"
						data-x="center" data-hoffset="134"
						data-y="center" data-voffset="-6"
						data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="600"
						data-start="1000"
						data-easing="Power4.easeOut"
						data-endspeed="500"
						data-endeasing="Power4.easeOut"
						data-autoplay="false"
						data-autoplayonlyfirsttime="false"
						style="z-index: 8"><iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360' style='width:640px;height:360px;'></iframe>
					</div>


				</li>

				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
					<!-- MAIN IMAGE -->
					<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


					<!-- LAYER NR. 1 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="20"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="600"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">YOUTUBE
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="70"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="900"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTOPLAY - TRUE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO NEXT SLIDE - TRUE
					</div>

					<!-- LAYER NR. 4 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="170"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO PLAY ONLY ONCE - TRUE
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption sfb customout"
						data-x="399"
						data-y="385"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="1000"
						data-start="1500"
						data-easing="Back.easeOut"
						data-endspeed="500"
						data-captionhidden="on"
						style="z-index: 7"><img src="images/videoshadow.png" alt="">
					</div>

					<!-- LAYER NR. 7 -->
					<div class="tp-caption sft customout"
						data-x="center" data-hoffset="134"
						data-y="center" data-voffset="-6"
						data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="600"
						data-start="1000"
						data-easing="Power4.easeOut"
						data-endspeed="500"
						data-endeasing="Power4.easeOut"
						data-autoplay="true"
						data-autoplayonlyfirsttime="true"
						data-nextslideatend="true"
						style="z-index: 8"><iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0;origin=http://www.themepunch.com' width='640' height='360' style='width:640px;height:360px;'></iframe>
					</div>


				</li>


				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
					<!-- MAIN IMAGE -->
					<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


					<!-- LAYER NR. 1 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="20"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="600"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">YOUTUBE
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="70"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="900"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTOPLAY - FALSE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO NEXT SLIDE - TRUE
					</div>

					<!-- LAYER NR. 4 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="170"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"

						style="z-index: 7">THUMBNAIL IMAGE - TRUE
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption sfb customout"
						data-x="399"
						data-y="385"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="1000"
						data-start="1500"
						data-easing="Back.easeOut"
						data-endspeed="500"
						data-captionhidden="on"
						style="z-index: 7"><img src="images/videoshadow.png" alt="">
					</div>

					<!-- LAYER NR. 7 -->
					<div class="tp-caption sft customout"
						data-x="center" data-hoffset="134"
						data-y="center" data-voffset="-6"
						data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="600"
						data-start="1000"
						data-easing="Power4.easeOut"
						data-endspeed="500"
						data-endeasing="Power4.easeOut"
						data-autoplay="false"
						data-nextslideatend="true"
						data-thumbimage="images/bg3.jpg"
						style="z-index: 8"><iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0' width='640' height='360' style='width:640px;height:360px;'></iframe>
					</div>


				</li>


				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
					<!-- MAIN IMAGE -->
					<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


					<!-- LAYER NR. 1 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="20"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="600"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">HTML5
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="70"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="900"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTOPLAY - TRUE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO NEXT SLIDE - FALSE
					</div>

					<!-- LAYER NR. 4 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="170"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">AUTO PLAY ONLY ONCE - FALSE
					</div>

					<!-- LAYER NR. 6 -->
					<div class="tp-caption sfb customout"
						data-x="399"
						data-y="385"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="1000"
						data-start="1500"
						data-easing="Back.easeOut"
						data-endspeed="500"
						data-captionhidden="on"
						style="z-index: 7"><img src="images/videoshadow.png" alt="">
					</div>

					<!-- LAYER NR. 7 -->
					<div class="tp-caption customin customout"
						data-x="center" data-hoffset="134"
						data-y="center" data-voffset="-6"
						data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="600"
						data-start="1000"
						data-easing="Power4.easeOut"
						data-endspeed="500"
						data-endeasing="Power4.easeOut"
						data-autoplay="true"
						data-autoplayonlyfirsttime="false"
						data-nextslideatend="false"
						style="z-index: 8">
											<video class="video-js vjs-default-skin" preload="none" controls  width="640px" height="360px"
										      poster="http://video-js.zencoder.com/oceans-clip.png"
										      data-setup="{}">
										    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
										    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
										    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
										    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
										  </video>
					</div>




				</li>

				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
					<!-- MAIN IMAGE -->
					<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


					<!-- LAYER NR. 1 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="20"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="600"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">HTML5
					</div>

					<!-- LAYER NR. 2 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="70"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="900"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">CONTROLS - NONE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">LOOP - TRUE
					</div>

					<!-- LAYER NR. 3 -->
					<div class="tp-caption medium_bg_red skewfromleft customout"
						data-x="20"
						data-y="120"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="800"
						data-start="1200"
						data-easing="Power4.easeOut"
						data-endspeed="300"
						data-endeasing="Power1.easeIn"
						data-captionhidden="on"
						style="z-index: 7">FULLSCREEN VIDEO
					</div>





					<!-- LAYER NR. 7 -->
					<div class="tp-caption customin customout fullscreenvideo"
						data-x="center" data-hoffset="0"
						data-y="center" data-voffset="0"
						data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
						data-speed="600"
						data-start="1000"
						data-easing="Power4.easeOut"
						data-endspeed="500"
						data-endeasing="Power4.easeOut"
						data-autoplay="true"
						data-autoplayonlyfirsttime="false"
						data-nextslideatend="false"
						style="z-index: 1">
											<video class="video-js vjs-default-skin" preload="none"  loop width="100%" height="100%"
										      poster="http://video-js.zencoder.com/oceans-clip.png"
										      data-setup="{}">
										    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
										    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
										    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
										    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
										  </video>
					</div>




				</li>




			</ul>
			<div class="tp-bannertimer"></div>
		</div>
	</div>

	<!-- THE SCRIPT INITIALISATION -->
	<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
	<script type="text/javascript">

		var revapi;

		jQuery(document).ready(function() {

			   revapi = jQuery('.tp-banner').revolution(
				{
					delay:9000,
					startwidth:1170,
					startheight:500,
					hideThumbs:10,
					videoJsPath:"rs-plugin/videojs/"

				});

		});	//ready

	</script>

	<!-- END REVOLUTION SLIDER -->


	</article><!-- Content End -->








<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

	<section class="container">
		<h2>How to Embed Videos in the Slider ?</h2>
		<p>You can embed Vimeo, YouTube and HTML5 Videos as Video Captions. Within a video you can set autoplay, autoplay only first time, loop (html5), nocontrol(html5), thumbnails for videos, fullscreen or predefined size.</p>
		<div style="width:100%;height:20px"></div>
		<h3>Important options in Plugin Initialisation:</h3>
		<pre>
		&lt;script type="text/javascript"&gt;
		var revapi;
		jQuery(document).ready(function() {
			   revapi = jQuery('.tp-banner').revolution(
				{
					delay:9000,
					startwidth:1170,
					startheight:500,
					hideThumbs:10,
					<strong>videoJsPath:"rs-plugin/videojs/"</strong>

				});
		});
		&lt;/script&gt;
		</pre>
		<div style="width:100%;height:20px"></div>
		<h3>YouTube Example - AutoPlay and Next Slide at End of the Video turned on</h3>
		<pre>
		&lt;div class="tp-caption sft customout"
			data-x="center" data-hoffset="134"
			data-y="center" data-voffset="-6"
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="600"
			data-start="1000"
			data-easing="Power4.easeOut"
			data-endspeed="500"
			data-endeasing="Power4.easeOut"
			<strong>data-autoplay="true"
			data-autoplayonlyfirsttime="false"
			data-nextslideatend="true"</strong>
		&gt;
			<strong>&lt;iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0' width='640' height='360'
			           style='width:640px;height:360px;'&gt;
			&lt;/iframe&gt;
			</strong>
		&lt;/div&gt;
		</pre>

		<div style="width:100%;height:20px"></div>
		<h3>Vimeo Example - AutoPlay on First Time and Next Slide at End of the Video turned on.</h3>
		<pre>
		&lt;div class="tp-caption sft customout"
			data-x="center" data-hoffset="134"
			data-y="center" data-voffset="-6"
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="600"
			data-start="1000"
			data-easing="Power4.easeOut"
			data-endspeed="500"
			data-endeasing="Power4.easeOut"
			<strong>data-autoplay="true"
			data-autoplayonlyfirsttime="true"
			data-nextslideatend="true"</strong>
		&gt;
			<strong>&lt;iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360'
			           style='width:640px;height:360px;'&gt;
			&lt;/iframe&gt;
			</strong>
		&lt;/div&gt;
		</pre>

		<div style="width:100%;height:20px"></div>
		<h3>HTML5 Example - Autoplay On, Loop but with Controls, and in Fullscreen.</h3>
		<pre>
		&lt;div class="tp-caption sft customout <strong>fullscreenvideo</strong>"
			data-x="center" data-hoffset="134"
			data-y="center" data-voffset="-6"
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="600"
			data-start="1000"
			data-easing="Power4.easeOut"
			data-endspeed="500"
			data-endeasing="Power4.easeOut"
			<strong>data-autoplay="true"
			data-autoplayonlyfirsttime="true"
			data-nextslideatend="true"</strong>
		&gt;
			<strong>&lt;video class="video-js vjs-default-skin" preload="none" loop  controls width="100%" height="100%"
			      poster="http://video-js.zencoder.com/oceans-clip.png"
			      data-setup="{}"&gt;
			    &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /&gt;
			    &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /&gt;
			    &lt;source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /&gt;
			    &lt;track kind="captions" src="demo.captions.vtt" srclang="en" label="English" /&gt;
			  &lt;/video&gt;
			</strong>
		&lt;/div&gt;
		</pre>

		<div style="width:100%;height:20px"></div>
		<h3>YouTube Example - With Thumbnail Image over Video</h3>
		<pre>
		&lt;div class="tp-caption sft customout"
			data-x="center" data-hoffset="134"
			data-y="center" data-voffset="-6"
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="600"
			data-start="1000"
			data-easing="Power4.easeOut"
			data-endspeed="500"
			data-endeasing="Power4.easeOut"
			<strong>data-autoplay="true"
			data-autoplayonlyfirsttime="false"
			data-nextslideatend="true"
			data-thumbimage="images/bg3.jpg"</strong>
		&gt;
			<strong>&lt;iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0' width='640' height='360'
			           style='width:640px;height:360px;'&gt;
			&lt;/iframe&gt;
			</strong>
		&lt;/div&gt;
		</pre>
	</section>






</body>